import {PolymerElement, html} from 'https://unpkg.com/@polymer/polymer/polymer-element.js?module';


class OwlMusic extends PolymerElement {

    constructor(){

        super();
        this._isplay=false;
        this._playEvent=this._play.bind(this);
    }
    connectedCallback(){

        super.connectedCallback();
        this.$._play.addEventListener("click",this._playEvent);

    }
    ready(){

        super.ready();
        if(this.poster!=""){

            this.$._poster.src=this.poster;
        }

        if(this.src!=""){

            this.$._audio.src=this.src;
        }

    }

    _play(){

        console.log("player e");
        if(this._isplay){

            this.$._play.src="./owl-img/play.png"
            this.$._audio.pause();
            console.log(this.$._audio.currentTime);

        }else{

            this.$._play.src="./owl-img/pause.png"

            this.$._audio.play();
            console.log(this.$._audio.currentTime);
        }
        this._isplay=!this._isplay;
   }


    static get properties() { return {
        mood: {

            type: String,
            value: "",
            observer:"_moodChange"
        },

        flag:{

            type:Boolean,
            value:false
        },
        posterSrc:{

            type:String,
            value:"",
        },
        src:{

            type:String,
            value:""
        },
        title:{

            type:String,
            value:""
        }

    }};


    _moodChange(newValue,oldValue){



    }

    static get template() {
        return html`
             <style>
             
            .owl-music{
            
               width: 300px;
               height: 80px;
               background-color: white;
               box-shadow: 0.2px 0.2px 4px 0.4px rgba(120,120,120,0.4);
               display: flex;
            
            }
            .owl-music-poster{
            
               width: 28%;
               height: 100%;
               background-color: aquamarine;
            
            }
            .owl-music-poster .poster{
                
                width: 100%;
                height: 100%;
         
            }
            
             .owl-music-poster .controller{
             
                width: 40px;
                height: 40px;
                position: absolute;
                margin-top: -60px;
                margin-left: 20px;
                cursor: pointer;
             
             }
            .owl-music-controller{
            
               width: 78%;
               height: 100%;
               /*background-color: bisque;*/
               
      
            }
            .owl-music-title{
            
               width: 100%;
               height: 40%;
               /*background-color: yellow;*/
               margin-top: 5%;
            
            }
            
            .owl-music-timeline{
               width: 100%;
               height: 40%;
               /*background-color: aqua;*/
            
            }
            .owl-music-timeline .timeline{
            
               width: 70%;
               margin-left: 12px;
               height: 2px;
               background-color: rgba(120,120,120,0.5);
            
               display: inline-block;
               margin-top: 8px;
             
               
            
            }
               .owl-music-timeline .timeinfo{
               
                 width: 20%;
                 height: 20px;
                 /*background-color: yellow;*/
                 font-size: 0.6rem;
                 color: rgba(120,120,120,0.8);
                 padding-left: 8px;
               
               }
               .timeline .timeline-ball{
               
                 width: 10px;
                 height: 10px;
                 background-color: rgba(255,255,255,1);
                 box-shadow: 0.1px 0.1px 0.2px 2px rgba(120,120,120,0.5);
                 margin-top: -4px;
                 border-radius: 50%;
                 cursor: pointer;
                 margin-left: 40px;
                 position: absolute;
               
               }
               .timeline .prog{
                 width: 40px;
                 height: 100%;
                 background-color: red;
               
               }
             
            </style>
        
          
           <div class="owl-music" id="_item">
               <audio src="./199282159357.mp3" id="_audio" controls="controls" loop="false" hidden="false"></audio>
             <div class="owl-music-poster">
                <img class="poster" src="./owl-img/poster.jpg" id="_poster">
                <img  class="controller" src="./owl-img/play.png" id="_play">
             </div>
             
             <div class="owl-music-controller">
                <div class="owl-music-title">
                
                 <p style="padding-left: 12px;font-size: 0.8rem;color: #f573a0">蝶々結び--Aimer</p>
                </div>
                <div class="owl-music-timeline">
                <div style="width: 100%;display: flex">
                   <div class="timeline">
                       <div class="timeline-ball"></div>
                       <div class="prog"></div>
                    </div>
                   <div class="timeinfo">01:15</div>
                 </div>
                   
                 </div>
             </div>
           </div>
        
        `;
    }

}

customElements.define("owl-music",OwlMusic);


